<template>
    <div class="leftBottom">
        <div class="bg-color-black">
            <div class="d-flex pt-2 pl-2">
                <span>
                  <icon name="chart-bar" class="text-icon"></icon>
                </span>
                <div class="d-flex">
                    <span class="fs-xl text mx-2">剧组招募公告</span>
                    <dv-decoration-3 class="dv-dec-3"/>
                </div>
            </div>
            <div style="height: 260px;padding-top: 10px">
                <dv-scroll-board :config="config" style="width:100%;height:100%" />
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "leftBottom",
        components: {},
        data() {
            return {
                config: {
                    header: ['剧组名', '招募角色', '招募人数'],
                    data: [
                        ['《安乐传》', '群众演员', '18人'],
                        ['《请君》', '特约演员', '5人'],
                        ['《夜旅人》', '武行演员', '3人'],
                        ['《天下长河》', '替身演员', '6人'],
                        ['《显微镜下的大明》', '跟剧演员', '2人'],
                        ['《宋慈韶华录》', '群众演员', '22人'],
                        ['《少年歌行》', '特约演员', '5人'],
                        ['《白银大劫案》', '武行演员', '3人'],
                    ],
                    rowNum: 6,
                    columnWidth: [200],
                    align: ['center','center','center']
                }
            }
        },
        mounted() {
        },
        methods: {}
    }
</script>

<style scoped lang="scss">
.leftBottom{
    $box-width: 100%;
    $box-height: 320px;
    padding: 16px;
    height: $box-height;
    min-width: $box-width;
    border-radius: 5px;
    .bg-color-black {
        height: $box-height - 30px;
        border-radius: 10px;overflow: hidden;
    }
    .text {
        color: #c3cbde; font-size: 16px;
    }
    .dv-dec-3 {
        position: relative;
        width: 100px;
        height: 20px;
        top: -3px;
    }
}
</style>
